Skip to content

[docs-infra] Improve Live Editing#1232

Open
dav-is wants to merge 57 commits intomasterfrom
docs-infra/improve-live-editing
Open

[docs-infra] Improve Live Editing#1232
dav-is wants to merge 57 commits intomasterfrom
docs-infra/improve-live-editing

Conversation

@dav-is
Copy link
Copy Markdown
Member

@dav-is dav-is commented Mar 20, 2026

Needed for #1145

Maintains the frame boundaries so that multiple highlighted lines expands when newlines are added within

Preview Deploy

Screencast.From.2026-04-07.19-17-59.webm

Because we use React's virtual DOM for rendering, only the changed line is actually mutated in the DOM. We also benefit from the browser native undo stack (I use Ctrl+Z to remove plus undo in the video):

Screencast.From.2026-04-07.19-19-20.webm

The virtual DOM avoid replacing unchanged DOM nodes all the way down to the token level:

Screencast.From.2026-04-16.12-59-56.webm

Important to note that only visible frames are rendered as html, so react doesn't need to diff the entire codeblock.

  • Uses https://github.com/FormidableLabs/use-editable
  • Found a couple bugs in use-editable which hasn't been maintained in a while, so forked into this repo
  • Added extensive cross-platform browser tests for use-editable() to test browser specific fixes
  • Moves useEditable() into useCode() instead of userspace, so we can move comments while editing and abstract this complexity from the user
  • react-render is still defined in userspace for now in the CodeController

Performance

Re-rendering the highlighted code occurs in a separate task, so input is not delayed by React Runner. To be considered performant, no task should delay input more than 50ms

On my machine

Re-rendering the highlighted code on edit: 15ms
Rendering the code's result with React Runner: 5ms

Calibrated "Mid-Tier Mobile"

Re-rendering the highlighted code on edit: 27ms
Rendering the code's result with React Runner: 10ms

@dav-is dav-is added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). labels Mar 20, 2026
@mui-bot
Copy link
Copy Markdown

mui-bot commented Mar 20, 2026

Bundle size report

Bundle size will be reported once CircleCI build #29013 finishes.

Status: 🟠 Processing...


Check out the code infra dashboard for more information about this PR.

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 23, 2026
@oliviertassinari oliviertassinari temporarily deployed to docs-infra/improve-live-editing - mui-tools-public PR #1232 March 24, 2026 22:45 — with Render Destroyed
@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 27, 2026
…ontentEditable mode

- Added tests for inserting text at the start of a framed line and after </p> without merging lines.
- Improved handling of plain text input in fallback contentEditable mode.
- Implemented logic to keep </div> on the next line when inserting after </p>.
- Added functionality to repair merged lines before onChange when receiving a merged DOM.
- Enhanced toString function to ensure newline character handling.
- Introduced adjustCursorAtNewlineBoundary to correctly position the cursor at newline boundaries.
- Updated useEditable state management to track pending content for better mutation handling.
- Refactored source editing logic to prevent unnecessary updates when source matches.
@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 22, 2026
@dav-is dav-is marked this pull request as ready for review April 24, 2026 12:55
@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 24, 2026
dav-is and others added 14 commits April 27, 2026 18:50
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 30, 2026
@zannager zannager requested a review from Janpot April 30, 2026 15:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: out-of-date The pull request has merge conflicts and can't be merged. scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants